<template>
  <Top-Page :amplifiedBase="amplifiedBase">
    <cu-custom bgColor="bg-gradual-white" :isBack="true">
      <template #backText></template>
      <template #content>通用设置</template>
    </cu-custom>

    <!-- <view class="cu-bar bg-white solid-bottom">
      <view class="action">新消息</view>
    </view> -->

    <!--  <view class="cu-item" @click.stop="toUrl('multi-account')">
        <view class="content">
          <text>账号管理</text>
        </view>
        <view class="action">
          <view
            class="cu-avatar lg mr-5 round"
            :style="[{ backgroundImage: 'url(' + loginStore.userInfo.avatar + ')' }]"
          ></view>
          <view class="arrow-left arrow-right"></view>
        </view>
      </view> -->
    <Cell class="cell-2" label="声音">
      <switch
        class="switch"
        @change="setVoice"
        :class="setting.voiceStatus ? 'checked' : ''"
        :checked="setting.voiceStatus"
      ></switch>
    </Cell>

    <Cell label="震动">
      <switch
        class="switch"
        @change="setVibrate"
        :class="setting.vibrateStatus ? 'checked' : ''"
        :checked="setting.vibrateStatus"
      ></switch>
    </Cell>

    <!-- <view class="cu-bar bg-white solid-bottom margin-top">
      <view class="action">其他设置</view>
    </view> -->

    <Cell label="圆形头像">
      <switch
        class="switch"
        @change="setAvatar"
        :class="setting.circleAvatar ? 'checked' : ''"
        :checked="setting.circleAvatar"
      ></switch>
    </Cell>

    <!-- #ifdef APP -->
    <Cell class="cell-2" label="新消息系统通知" rightIcon @click.stop="onSet">
      <view class="action">前往系统设置</view>
    </Cell>
    <!-- #endif -->

    <Cell class="cell-2 cell-3-right" label="关怀模式">
      <view class="slider-wrap">
        <view class="slider-text">
          <view v-for="(item, index) in sliderSub" :key="`${item}_${index}`">{{ item }}</view>
        </view>
        <view class="slider-content">
          <slider
            class="slider"
            :value="sliderValue"
            @change="onChange"
            @changing="sliderChange"
            step="50"
            min="50"
            max="300"
          />
          <view class="slider-sub">
            <view v-for="(item, index) in sliderSub" :key="`${item}_${index}-fd`">|</view>
          </view>
        </view>
      </view>
    </Cell>

    <!-- 协议 -->
    <Cell
      rightIcon
      v-for="(item, index) in agreements"
      :key="item.title"
      :class="{ 'cell-2': index === 0 }"
      :label="item.title"
      @click="toAgreement(item.id)"
    />

    <!-- #ifdef APP-->
    <view class="version">
      <view>{{ version }}</view>
      <view>当前系统版本</view>
    </view>
    <!-- #endif-->
  </Top-Page>
</template>

<script>
import Cell from '@/components/Cell/Cell.vue';
import { useloginStore } from '@/store/login';
import pinia from '@/store/index';
const loginStore = useloginStore(pinia);
export default {
  data() {
    return {
      sliderSub: ['小', '标准', '', '', '', '大'],
      sliderValue: 100,
      version: '',
      amplifiedBase: uni.getStorageSync('amplifiedBase') || 1,
      loginStore: loginStore,
      globalConfig: loginStore.globalConfig,
      agreements: [
        {
          title: '畅了软件许可及服务协议',
          id: 0
        },
        {
          title: '畅了个人账号使用规范',
          id: 2
        },
        {
          title: '儿童隐私保护声明',
          id: 3
        },
        {
          title: '畅了隐私保护指引',
          id: 1
        }
        // {
        //   title: '服务协议',
        //   id: 4
        // }
      ],
      setting: {
        voiceStatus: true,
        vibrateStatus: false,
        circleAvatar: false
      }
    };
  },
  components: { Cell },
  created() {
    let setting = uni.getStorageSync('appSetting') ?? '';
    if (setting) {
      this.setting = setting;
    }

    // #ifdef APP
    plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
      this.version = widgetInfo.version;
    });
    // #endif
  },
  mounted() {
    this.sliderValue = Number((this.amplifiedBase * 100).toFixed(2));
  },
  methods: {
    onSet() {
      const main = plus.android.runtimeMainActivity();
      const Uri = plus.android.importClass('android.net.Uri');
      const Intent = plus.android.importClass('android.content.Intent');

      // 获取当前应用的包名
      const packageName = main.getPackageName();

      // 创建Intent对象，目标是跳转到应用的设置界面
      const intent = new Intent('android.settings.APPLICATION_DETAILS_SETTINGS');

      // 设置数据（指定应用包名）
      intent.setData(Uri.parse('package:' + packageName));

      // 启动Activity，打开当前应用的设置详情页面
      main.startActivity(intent);
    },
    sliderChange(e) {
      const value = e.detail.value;
      this.sliderValue = value;
      this.amplifiedBase = parseFloat((value / 100).toFixed(2));
      // #ifdef H5
      // document.documentElement.style.setProperty('--amplified_base', this.amplifiedBase);
      // #endif
    },
    onChange(e) {
      this.sliderChange(e);
      this.$nextTick(() => {
        this.$api.msgApi.pagesize({ pagesize: this.amplifiedBase });
      });
    },
    toAgreement(id) {
      uni.navigateTo({
        url: `/pages/agreement/index?id=${id}`
      });
    },
    toUrl(url) {
      uni.navigateTo({
        url: `/pages/mine/${url}`
      });
    },
    setVoice(e) {
      this.setting.voiceStatus = e.detail.value;
      this.saveSet();
    },
    setVibrate(e) {
      this.setting.vibrateStatus = e.detail.value;
      this.saveSet();
    },
    setAvatar(e) {
      this.setting.circleAvatar = e.detail.value;
      this.saveSet();
    },
    saveSet() {
      loginStore.setAppSetting(this.setting);
    }
  }
};
</script>

<style scoped lang="scss">
.cu-list {
  padding: 0;

  &::after {
    width: 0;
    height: 0;
  }
}

.cu-avatar.lg {
  width: 2rem;
  height: 2rem;
  font-size: 1em;
}

.arrow-right {
  border-color: #999;
  transform: rotate(225deg);
}

.cu-item::after {
  left: 16rpx;
  right: 16rpx;
}
.version {
  text-align: center;
  color: #999;
  margin-top: 100rpx;
}
.slider-wrap {
  margin-top: 32rpx;
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  align-items: stretch;

  .slider-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .slider-content {
    margin-top: 30rpx;
    position: relative;

    .slider {
      flex: 1;
      margin: 0;
    }

    .slider-sub {
      position: absolute;
      top: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 30rpx;
    }
  }
}
.switch,
.cuIcon-right {
  zoom: var(--amplified_base);
}
.action {
  line-height: 1.2;
  color: #999;
}

:deep(.cell-2) {
  .cell-label {
    width: 8em;
  }
}

:deep(.cell) {
  .cell-left .cell-label {
    width: auto;
  }
}

:deep(.cell-3-right) {
  flex-direction: column;
  align-items: stretch;

  .cell-right {
    flex: 1;
  }
}
</style>
